<template>
  <div class="feedback-container">
    <van-form @submit="onSubmit" class="feedback-form">
      <van-cell-group inset>
        <van-field
          v-model="formData.name"
          name="姓名"
          label="姓名"
          placeholder="请输入您的姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        
        <van-field
          v-model="formData.email"
          name="邮箱"
          label="邮箱"
          placeholder="请输入您的邮箱"
          :rules="[
            { required: true, message: '请填写邮箱' },
            { type: 'email', message: '请输入正确的邮箱格式' }
          ]"
        />
        
        <van-field
          v-model="formData.phone"
          name="手机号"
          label="手机号"
          placeholder="请输入您的手机号"
          :rules="[
            { required: true, message: '请填写手机号' },
            { validator: phoneValidator, message: '请输入正确的手机号' }
          ]"
        />
        
        <van-field
          v-model="formData.feedbackType"
          name="反馈类型"
          label="反馈类型"
          placeholder="请选择反馈类型"
          is-link
          readonly
          :rules="[{ required: true, message: '请选择反馈类型' }]"
          @click="showTypePicker = true"
        />
        
        <van-field
          v-model="formData.content"
          name="留言内容"
          label="留言内容"
          type="textarea"
          placeholder="请输入您的留言内容"
          rows="4"
          autosize
          :rules="[{ required: true, message: '请填写留言内容' }]"
        />
      </van-cell-group>
      
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交留言
        </van-button>
      </div>
    </van-form>
    
    <!-- 反馈类型选择器 -->
    <van-popup v-model:show="showTypePicker" position="bottom">
      <van-picker
        :columns="feedbackTypes"
        @confirm="onTypeConfirm"
        @cancel="showTypePicker = false"
      />
    </van-popup>
    
    <!-- 提交成功提示 -->
    <van-dialog
      v-model:show="showSuccessDialog"
      title="提交成功"
      show-cancel-button
      @confirm="onDialogConfirm"
    >
      <div style="padding: 15px;">
        感谢您的留言，我们会尽快处理您的反馈！
      </div>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import {
  Form,
  Field,
  CellGroup,
  Button,
  Popup,
  Picker,
  Dialog,
  Toast
} from 'vant';

// 表单数据
const formData = reactive({
  name: '',
  email: '',
  phone: '',
  feedbackType: '',
  content: ''
});

// 反馈类型选项
const feedbackTypes = [
  { text: '功能建议', value: '功能建议' },
  { text: 'BUG反馈', value: 'BUG反馈' },
  { text: '使用问题', value: '使用问题' },
  { text: '其他', value: '其他' }
];

// 控制选择器显示
const showTypePicker = ref(false);

// 控制成功提示显示
const showSuccessDialog = ref(false);

// 手机号验证
const phoneValidator = (val) => {
  return /^1[3-9]\d{9}$/.test(val);
};

// 选择反馈类型
const onTypeConfirm = (value) => {
  formData.feedbackType = value.text;
  showTypePicker.value = false;
};

// 返回按钮点击事件
const onClickLeft = () => {
  Toast('返回上一页');
  // 实际项目中这里可能是 router.go(-1)
};

// 表单提交
const onSubmit = () => {
  console.log('提交的表单数据:', formData);
  // 这里可以添加提交到服务器的逻辑
  
  // 显示成功提示
  showSuccessDialog.value = true;
};

// 对话框确认事件
const onDialogConfirm = () => {
  // 重置表单
  Object.keys(formData).forEach(key => {
    formData[key] = '';
  });
  
  Toast('已返回留言页面');
};
</script>

<style scoped>
.feedback-container {
  height: 100vh;
  background-color: #f7f8fa;
}

.feedback-form {
  margin-top: 16px;
}
</style>